*{
    padding: 0;
    margin: 0;
    list-style: none;
}
body{
    background-color: rgb(243,243,243);
}
.row{
    .col-md-10,.col-lg-10{
        padding: 0;
    }
}
// 顶部区域
.nav-bar{
    width: 100%;
    // height: 80px;
    line-height: 80px;
    background-color: rgb(119,198,192);
    .logo{
        font-size: 16px;
        color: #fff;
        margin-left: 20px;
        cursor: pointer;
        span{
            font-weight: bold;
        }
    }
    .col-lg-8 ul{
        background-color: rgb(119,198,192)!important;
        li{
            float: left;
            width: 14%;
            font-size: 14px;
            text-align: center;
            color:#fff;
            cursor: pointer;
            span{
                display: inline-block;
                width: 100%;
                height: 40px;
                line-height:40px;
                border-radius:5px;
                background-color:rgb(119,198,192);
                cursor: pointer;
            }
            &:nth-child(1){
                font-size: 18px;
            }
        }
    }
}
.center{
    //轮播图部分
    .swiper {
        position: relative;
        width: 100%;
        height: 100%;
        margin-top: -20px;
        margin-bottom: 20px;
      }
    
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
    
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
    
      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    
      .swiper {
        margin-left: auto;
        margin-right: auto;
      }
      .swiper-left{
          position:absolute;
          top: 50%;
          left: 0;
          width: 50px;
          height: 50px;
          text-align: center;
          z-index: 999;
          transform: translate(0, -50%);
          cursor: pointer;
          &:hover{
              background-color:rgb(155, 151, 151);
              opacity: 0.6;
          }
          span{
              display: inline-block;
              width: 20px;
              height: 20px;
              margin-top:15px;
              background-color:aqua;
              background:url(../images/轮播图箭头.png) no-repeat;
          }
      }
      .swiper-right{
        position:absolute;
        top: 50%;
        right: 0;
        width: 50px;
        height: 50px;
        text-align: center;
        z-index: 999;
        transform: translate(0, -50%);
        cursor: pointer;
        &:hover{
            background-color:rgb(155, 151, 151);
            opacity: 0.6;
        }
        span{
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-top:15px;
            background-color:aqua;
            background:url(../images/轮播图箭头.png) no-repeat -30px 0;
        }
    }
    //下面的英文部分
    .title{
        width: 94%;
        height: 157px;
        margin:0 auto;
        background-color: rgb(236,236,236);
        padding:30px 0 0 45px;
        h2{
            font-size: 24px;
            color:rgb(170,170,170)
        }
        p{
            color:rgb(170,170,170)
        }
    }
    //卡片
    .card{
        ul{
            width: 94%;
            height: 270px;
            margin:40px auto;
            li{
                position: relative;
                float: left;
                width: 24%;
                height: 100%;
                background-color: #fff;
                margin-left: 1.33333333%;
                text-align: center;
                &:nth-child(1){
                    margin-left:0;
                }
                span{
                    display: inline-block;
                    width: 60px;
                    height: 60px;
                    background-color:rgb(106,179,170);
                    margin-top: 20px;
                    border-radius: 10px;
                    cursor: pointer;
                    &:hover{
                        background-color:rgb(234,100,93)
                    }
                }
                h2{
                    font-size: 20px;
                    color:rgb(170,170,170);
                    margin-top:10px;
                }
                p{
                    color:rgb(170,170,170);
                }
                i{
                    position:absolute;
                    bottom: -20px;
                    left: 50%;
                    display: inline-block;
                    width: 125px;
                    height: 50px;
                    background-color:rgb(106,179,170);
                    line-height: 50px;
                    text-align: center;
                    color:#fff;
                    transform: translate(-50%, 0);
                    // box-shadow:0 0px 10px 0px black;
                    font-style: normal;
                    &::after{
                        content:"";
                        display: block;
                        width: 100%;
                        height: 3px;
                        background-color:#666;
                    }
                }
                .i-after{
                    &::after{
                        content:"";
                        display: block;
                        width: 100%;
                        height: 3px;
                        background-color:rgb(171,56,59);
                    }
                }
            }
        }
    }
}
//图片部分
.hoverImg{
    width: 100%;
    background-color:rgb(236,236,236);
    text-align: center;
    // margin: 0 auto;
    h2{
        font-size: 26px;
        font-weight: bold;
        color:rgb(228,106,107);
    }
    span{
        color:rgb(170,170,170);
    }
    ul{
        width: 100%;
        margin-top: 40px;
        li{
            position: relative;
            float: left;
            width: 24%;
            height: 265px;
            margin-right:1%;
            img{
                width: 100%;
                height: 170px;
                cursor: pointer;
              
            }
            .mask{
                width: 100%;
                height: 170px;
                position:absolute;
                // top: 64%;
                left: 0;
                background-color:rgb(86,86,86);
                opacity: 0;
                cursor: pointer;
                .mask-btn{
                    width: 50%;
                    height: 30px;
                    background-color:rgb(67,151,168);
                    line-height:30px;
                    color:#fff;
                    position: absolute;
                    top:50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    cursor: pointer;
                    animation: forwards;
                }
                // &:hover{
                //     // opacity: 0.8;
                // }
                @keyframes maskbtn {
                    from { 
                        top: 64%;
                    }
                    to{
                        top:0;
                    }
                }
            }
            p{
                font-size: 16px;
                font-weight: bold;
                color: #333;
                margin-top:20px;
                margin-bottom: 0px;
            }
            i{
                display: inline-block;
                font-size: 14px;
                color:rgb(170,170,170);
                font-style:normal;
            }
        }
    }
}
//底部
.footer{
    width: 100%;
    height: 370px;
    background-color:#fff;
    ul{
        margin-top:70px;
        li{
            position: relative;
            float: left;
            width: 20%;
            text-align: center;
            img{
                width: 60%;
                height: 60%;
                cursor: pointer;
                &:hover{
                    transform: translateY(-20px);
                }
            }
            .shadowbox{
                position: relative;
                display:inline-block;
                width: 50%;
                height: 10px;
                line-height: 10px;
                background-color:rgb(165, 164, 164);
                opacity: 0.1;
                border-radius: 5px;
                box-shadow: 0px 0px 10px rgb(0, 0, 0);
                opacity: 0;
                .img-shadow{
                    position:absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    display: inline-block;
                    width: 60%;
                    height: 5px;
                    text-align: center;
                    background-color: black;
                    border-radius: 30%;
    
                }
            }
            i{
                font-size: 25px;
                color:rgb(170,170,170);
            }
            h4{
                margin-top: -10px;
                span{
                    overflow: hidden;
                    display: inline-block;
                    font-size: 18px;
                    font-weight: bold;
                    
                    i{
                        display: inline-block;
                        font-weight: normal;
                        margin:15px 0;
                    }
                }
                p{
                    font-size: 14px;
                    padding:0 20px;
                    color: rgb(170,170,170);
                    line-height: 18px;
                }
            }
            .y-img{
                position:absolute;
                top: 20%;
                right:-18%;
                width: 70px;
                height: 20px;
                background:url(../images/y箭头.png) no-repeat;
            }
        }
    }
}
.footer-bar{
    width: 100%;
    height: 80px;
    background-color: rgb(119,198,192);
}